<template>
	<div>

		<panle title='文件管理' content="文件管理"></panle>
		<div class="searchbar">
			<el-row class="pt20">
				<el-col :span="24">
					<el-button size="mini">刷新</el-button>
					<!-- <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="sys:menu:add" type="primary" label="添加"></pers-button> -->
					<!-- <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:del" label="批量删除"></pers-button> -->
					<pers-button icon="el-icon-s-help" size="mini" @click="cate()" perms="sys:menu:add" type="success"
						label="文件分类"></pers-button>
					<pers-button icon="el-icon-upload" size="mini" perms="sys:menu:add" type="danger" label="上传文件"
						@click="uploadDrawer = true">
					</pers-button>
					<pers-button icon="el-icon-s-tools" size="mini" @click="filesDrawer = true" perms="sys:menu:add"
						type="primary" label="上传配置"></pers-button>
				</el-col>

			</el-row>
		</div>
		<div class="files-list">
			<el-radio-group v-model="listtype" size="small" @change="typeChange">
				<el-radio-button :label="3000" border>全部</el-radio-button>
				<el-radio-button :label="1" border>图片</el-radio-button>
				<el-radio-button :label="3" border>视频</el-radio-button>
				<el-radio-button :label="2" border>文件</el-radio-button>
				<el-radio-button :label="4" border>其它</el-radio-button>
			</el-radio-group>

			<div style="margin-right: 10px;">
				<transition name="fade-transform" mode="out-in">
					<div class="d-c-r-l">
						<div v-for="(item,index) in filesDate" :key="index" v-if="filesDate.length>0">
							<div class="d-c-r-i">

								<el-image :src="item.http_url" fit="contain" v-if="item.type==1">
								</el-image>
								<!-- <video :src="item.http_url" controls="controls" v-if="item.type==3" width="100%"
									height="100%">
									您的浏览器不支持 video 标签。
								</video> -->

								<!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
									:options="{autoplay:true,sources: [{type: 'video/mp4', src: item.http_url}],}" v-if="item.type==3"></video-player> -->
								<el-image :src="require('@/assets/img/video.png')" fit="contain" v-if="item.type==3">
								</el-image>
								<el-image :src="require('@/assets/img/files.png')" fit="contain" v-if="item.type==2">
								</el-image>
								<div class="d-c-r-i-h">
									<i class="el-icon-download"></i>
									<i class="el-icon-zoom-in" @click="listshowpic(item)" v-if="item.type==1"></i>
									<i class="el-icon-video-play" v-if="item.type==3" @click="showVideo(item)"></i>
									<i class="el-icon-delete-solid" @click="delRole(item)"></i>

									<!-- <i class="el-icon-refresh-right"></i> -->
								</div>
								<div class="select-check" :class="[item.show? 'showflex' : 'hide']"><i
										class=" el-icon-check"></i></div>


							</div>
							<div class="files-title">{{item.title}}</div>
						</div>
						<el-empty v-if="filesDate.length<=0"></el-empty>

					</div>
				</transition>

			</div>
			<div class="block">

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>

		</div>


		<!-- <div>
			<el-radio-group v-model="type" size="small" >
				<el-radio :label="0" border>图片</el-radio>
				<el-radio :label="1" border>视频</el-radio>
				<el-radio :label="2" border>文件</el-radio>
				<el-radio :label="3" border>其它</el-radio>
			</el-radio-group>
		</div>

		<div class="block">
		  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div> -->

		<el-drawer title="上传配置" :visible.sync="filesDrawer" direction="rtl" class="filesDrawer" size="50%">
			<div class="drawer-maing">
				<el-tabs v-model="activeName" @change="radioChange">
					<el-tab-pane label="基本配置" name="0"></el-tab-pane>

					<el-tab-pane label="阿里云OSS" name="1"></el-tab-pane>
					<el-tab-pane label="腾讯云COS" name="2"></el-tab-pane>
					<el-tab-pane label="七牛云" name="3"></el-tab-pane>
				</el-tabs>
				<div>
					<el-form :model="form" :rules="rules" ref="form" class="tabform" label-position="center"
						label-width="160px">
						<el-row>
							<el-col :span="24">
								<el-form-item label="存储位置" prop="files_ares">
									<el-radio-group v-model="form.files_ares" size="small" @change="radioChange">
										<el-radio-button :label="0" border>本地</el-radio-button>
										<el-radio-button :label="1" border>阿里云OSS</el-radio-button>
										<el-radio-button :label="2" border>腾讯云COS</el-radio-button>
										<el-radio-button :label="3" border>七牛云</el-radio-button>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<div :class="activeName=='0'?'show':'hidden'">

							<el-row>
								<el-col :span="24">
									<el-form-item label="上传类型限制" prop="allowExts">
										<el-input v-model="form.allowExts" size="mini"
											placeholder="设置系统允许上传文件的后缀，多个以英文逗号隔开。如：png,jpg,rar,doc"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="上传大小限制" prop="fileSize">
										<el-input v-model="form.fileSize" size="mini" placeholder="设置系统允许上传文件的大小">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

						</div>
						<div :class="activeName=='1'?'show':'hidden'">
							<el-row>
								<el-col :span="24">
									<el-form-item label="Bucket名称">
										<el-input v-model="form.a_bucket" size="mini" placeholder="填写OSS存储空间名称，如：oss">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="EndPoint">
										<el-input v-model="form.a_endPoint" size="mini"
											placeholder="填写OSS数据中心访问域名，如：oss-cn-shenzhen.aliyuncs.com"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="Bucket 域名">
										<el-input v-model="form.a_domain" size="mini"
											placeholder="填写OSS存储外部访问域名，如：kyshop.oss-cn-shenzhen.aliyuncs.com">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="Access Key ID">
										<el-input v-model="form.a_accessKeyId" size="mini"
											placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到访问密钥。"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="Access Key Secret">
										<el-input v-model="form.a_accessKeySecret" size="mini"
											placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

						</div>


						<div :class="activeName=='2'?'show':'hidden'">

							<el-row>
								<el-col :span="24">
									<el-form-item label="secretId" prop="secretId">
										<el-input v-model="form.secretId" size="mini" placeholder="填写账户中心的 SECRETID">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="secretKey">
										<el-input v-model="form.secretKey" size="mini" placeholder="填写开发者拥有的 secretKey">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="存储桶名称">
										<el-input v-model="form.bucket" size="mini" placeholder="填写开发者拥有的存储桶地域">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="访问域名">
										<el-input v-model="form.domain" size="mini" placeholder="填写开发者拥有的访问域名">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="存储桶地域">
										<el-input v-model="form.region" size="mini" placeholder="填写开发者拥有的存储桶地域">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>




						</div>

						<div :class="activeName=='3'?'show':'hidden'">
							<el-row>
								<el-col :span="24">
									<el-form-item label="存储空间（bucket）">
										<el-input v-model="form.q_bucket" size="mini"
											placeholder="填写七牛云存储空间名称，如：static">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="24">
									<el-form-item label="外链域名">
										<el-input v-model="form.q_domain" size="mini"
											placeholder="填写七牛云存储访问域名，如：static.ctolog.cc"></el-input>
									</el-form-item>
								</el-col>
							</el-row>



							<el-row>
								<el-col :span="24">
									<el-form-item label="AccessKey">
										<el-input v-model="form.q_accessKey" size="mini"
											placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到访问密钥"></el-input>
									</el-form-item>
								</el-col>
							</el-row>


							<el-row>
								<el-col :span="24">
									<el-form-item label="SecretKey">
										<el-input v-model="form.q_secretKey" size="mini"
											placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

						</div>
						<el-col :span="24">
							<el-form-item label="">
								<el-button type="success" size="mini" @click="submitSet" icon="fa fa-plus-circle">保存数据
								</el-button>
								<el-button @click="resetForm" size="mini" type="warning" icon="fa fa-recycle">重置
								</el-button>
							</el-form-item>
						</el-col>
					</el-form>
				</div>
			</div>
		</el-drawer>

		<!-- 分类 -->
		<el-drawer title="文件分类" :visible.sync="cateDrawer" direction="rtl" class="filesDrawer" size="50%">
			<div class="searchbar" style="margin: 10px;">
				<el-row class="pt20">
					<el-button size="mini" @click="getCate()">刷新</el-button>
					<pers-button icon="el-icon-edit" size="mini" @click="addopen()" perms="files:cate:add"
						type="primary" label="添加"></pers-button>
				</el-row>
				<el-table :data="cateData" default-expand-all style="width: 100%;margin-bottom: 20px;" row-key="id"
					:header-cell-style="{background:'#f9f9f9'}" stripe
					:tree-props="{children: 'children', hasChildren: 'hasChildren'} " v-loading="loading">

					<el-table-column prop="name" label="节点名称"></el-table-column>
					<el-table-column prop="order_by" label="排序" width="100">
						<template slot-scope="scope">
							<el-input v-model="scope.row.sub.order_by" placeholder="请输入内容" size="mini"
								@input="changInput(scope.row)"></el-input>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<PersButton type="text" size="mini" label="添加子节点" icon="fa fa-plus" perms="files:cate:add"
								@click="addopen(scope.row)"></PersButton>
							<PersButton type="text" size="mini" label="编辑" icon="fa fa-pencil" perms="files:cate:edit"
								@click="editopen(scope.row)"></PersButton>
							<PersButton type="text" size="mini" label="删除" icon="fa fa-trash" perms="files:cate:del"
								@click="delopen(scope.row)"></PersButton>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-drawer>


		<!-- 添加分类的弹窗 -->
		<el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body
			:title="!cateform.cate_id ? '新增' : '修改'">
			<el-form ref="cateform" :model="cateform" :rules="caterules" label-width="100px">
				<el-row>

					<el-col :span="24">
						<el-form-item label="上级节点" prop="parent_id">
							<div style="height: 30px; line-height: 30px;">
								<treeselect v-model="cateform.parent_id" :options="parentDate" :normalizer="normalizer"
									:show-count="true" placeholder="选择上级菜单" />
							</div>

						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label=" 分类名称" prop="cate_name">
							<el-input v-model="cateform.cate_name" placeholder="请输入 分类名称" size="small" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="备注">
							<el-input v-model="cateform.remarks" size="mini" type="textarea" :rows="4"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="排序" prop="order_by">
							<el-input v-model="cateform.order_by" placeholder="请输入排序" size="small" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="open = false" size="small">取 消</el-button>
				<el-button type="primary" @click="!cateform.cate_id ? submitForm('cateform') : subEditForm('cateform') "
					size="small">确 定</el-button>
			</div>

		</el-dialog>


		<!-- 上传文件 -->
		<el-drawer title="上传文件" :visible.sync="uploadDrawer" size="50%" class="drawer-main">


			<div style="margin: 20px;">
				<div class="upload-button">
					<el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
				</div>
				<el-form ref="uploadform" :model="uploadform" label-width="80px" label-position="top">
					<el-row>

						<el-col :span="24">
							<el-form-item label="分类" prop="cateid">
								<div style="height: 30px; line-height: 30px;">
									<treeselect v-model="uploadform.cateid" :options="parentDate"
										:normalizer="normalizer" :show-count="true" placeholder="选择分类" />
								</div>

							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-upload class="upload-demo" ref="upload" :action="_self.actions" :on-preview="handlePreview"
					:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" multiple
					list-type="picture-card" :headers="uploadHeader" :data="uploadform" :on-success="uploadsuccess">
					<i slot="default" class="el-icon-plus"></i>
					<!-- <div class="upload-button">
						<el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
					</div> -->


				</el-upload>


			</div>
		</el-drawer>
		<!-- 图片浏览 -->
		<el-dialog :visible.sync="dialogVisible" title="图片浏览" v-dialogDrag>
			<img width="100%"  :src="dialogImageUrl" alt="">

		</el-dialog>
		<!-- 视频浏览 -->
		<el-dialog :visible.sync="videodialog" title="图片浏览" v-dialogDrag>
			<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
				:options="playerOptions" @close="colsevideo"></video-player>

		</el-dialog>
	</div>
</template>

<script>
	let _self;
	let uploads = process.env.VUE_APP_API;
	import Panle from '@/components/Panle';
	import PersButton from '@/components/PersButton';
	import {
		FilesSet,
		getFilesSet,
		getCateList,
		addCate,
		editCate,
		delCate,
		FilesListPage
	} from '@/api/tool/files';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import {
		getToken
	} from '@/common/token'
	import { Loading } from 'element-ui';
	import NProgress from 'nprogress'
	import 'nprogress/nprogress.css'
	export default {
		components: {
			Panle,
			PersButton,
			Treeselect
		},
		data() {
			return {

				filesDrawer: false,
				activeName: '0',
				form: {
					'files_ares': 0,
				},

				rules: {
					files_ares: [{
						required: true,
						message: "请选择存储位置",
						trigger: "blur"
					}],
					allowExts: [{
						required: true,
						message: "允许上传的文件类型",
						trigger: "blur"
					}],
					fileSize: [{
						required: true,
						message: "允许上传文件的大小",
						trigger: "blur"
					}],
				},
				cateDrawer: false,
				cateData: [],
				loading: false,
				open: false,
				cateform: {

					'cate_name': undefined,
					'parent_id': undefined,
					'remarks': undefined,
					'order_by': undefined,
					'icon': undefined,

				},
				caterules: {

					cate_name: [{
						required: true,
						message: ' 分类名称不能为空',
						trigger: 'blur'
					}],
					parent_id: [{
						required: true,
						message: '上级ID不能为空',
						trigger: 'blur'
					}],
					order_by: [{
						required: true,
						message: '排序不能为空',
						trigger: 'blur'
					}],

				},
				parentDate: [],
				listtype: 3000,
				filesDate: [], //文件数据
				pageSize: 10, //一页显示多少条
				pageNumber: 1, //当前多少页
				keyWord: '',
				total: 0, //总页数
				uploadDrawer: false, //上传窗口
				actions: uploads + 'apiadmin/uploads/index',
				uploadHeader: {
					"Authorization": "Bearer " + getToken()
				},
				uploadform: {
					cateid: undefined
				},
				fileList: [],
				dialogVisible:false,//图片浏览
				dialogImageUrl:'',
				videodialog:false,//视频浏览
				playerOptions : {
				    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				    autoplay: false, //如果true,浏览器准备好时开始回放。
				    muted: false, // 默认情况下将会消除任何音频。
				    loop: false, // 导致视频一结束就重新开始。
				    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				    language: 'zh-CN',
				    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				    sources: [{
				      type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
				      src: "" //url地址
				    }],
				    poster: "../../static/images/test.jpg", //你的封面地址
				    // width: document.documentElement.clientWidth, //播放器宽度
				    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				    controlBar: {
				      timeDivider: true,
				      durationDisplay: true,
				      remainingTimeDisplay: false,
				      fullscreenToggle: true  //全屏按钮
				    }
				}
			}
		},
		created() {
			_self = this;
			_self.init();
		},
		computed:{

		},
		methods: {

			init() {
				NProgress.start();
			    _self.getSet();
				_self.getCate();
				let param = {
					"pageSize": _self.pageSize,
					"pageNumber": _self.pageNumber,
					"keyWord": _self.keyWord,
					"type": _self.listtype,
					"cateid": '',
				}
				FilesListPage(param).then((res) => {

					_self.filesDate = res.data.list;
					_self.total = res.data.total;
					//setTimeout(()=>{
						NProgress.done()
						// this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
						//   loadingInstance.close();
						// });
					//},2000)
				})
			},

			getSet() {
				getFilesSet().then((res) => {
					_self.form = res.data;
					_self.activeName = res.data.files_ares.toString();
				})
			},
			radioChange: function(e) {

				_self.activeName = e.toString();
			},
			submitSet: function() {
				_self.$refs['form'].validate((valid) => {
					if (valid) {
						_self.addEditSet();
					} else {
						return false;
					}
				});
			},
			addEditSet: function() {
				FilesSet(_self.form).then((res) => {
					_self.msgSuccess(res.msg)
					setTimeout(function() {
						_self.filesDrawer = false;
					}, 2000)
					//_self.filesDrawer = false;
				})
			},
			resetForm() {
				this.$refs['form'].resetFields();
			},
			getCate() {
				_self.loading = true;
				_self.parentDate = [];
				getCateList().then((res) => {
					_self.loading = false;
					if (res.code == 200) {
						_self.cateData = res.data.filesCateTree;
						const menu = {
							id: 0,
							name: '主节点',
							children: []
						};
						menu.children = res.data.filesCateTree;
						_self.parentDate.push(menu);
					}
				})
			},
			cate() {

				_self.cateDrawer = true;
			},
			normalizer: function(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.id,
					label: node.name,
					children: node.children
				};
			},
			addopen: function(data) {
				_self.cateform = {

					'cate_name': undefined,
					'parent_id': undefined,
					'remarks': undefined,
					'order_by': 100,
					'icon': undefined,
				}
				if (data != null) {
					_self.cateform.parent_id = data.id;
				} else {
					_self.cateform.parent_id = 0;
				}
				_self.open = true;
			},
			submitForm: function(data) {
				this.$refs[data].validate((valid) => {
					if (valid) {
						_self.addcate();
					} else {
						return false;
					}
				});
			},
			addcate: function() {
				addCate(_self.cateform).then((res) => {
					if (res.code == 200) {
						_self.msgSuccess(res.msg)
						_self.open = false;
						_self.getCate();
					} else {
						_self.msgError(res.msg);
					}
				})
			},
			editopen: function(data) {
				_self.open = true;
				_self.cateform.parent_id = data.parentId;
				_self.cateform.cate_id = data.id;
				let editForm = {
					"cate_id": data.id,

					'cate_name': data.name,
					'parent_id': data.parentId,
					'remarks': data.sub.remarks,
					'order_by': data.sub.order_by,
					'icon': data.icon,

				}
				Object.assign(_self.cateform, editForm);
			},
			subEditForm: function() {
				editCate(_self.cateform).then((res) => {
					if (res.code == 200) {
						_self.msgSuccess(res.msg)
						_self.open = false;
						_self.getCate();
					} else {
						_self.msgError(res.msg);
					}
				})
			},
			delopen: function(data) {
				_self.$confirm('确定删除【' + data.name + '】此规则', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					delCate(data.id).then((res) => {
						if (res.code == 200) {
							_self.msgSuccess(res.msg);
							_self.getCate();
						} else {
							_self.msgError(res.msg);
						}
					})


				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			handleSizeChange: function(e) {
				_self.pageSize = e;
				_self.init();
			},
			handleCurrentChange: function(e) {
				_self.pageNumber = e;
				_self.init();
			},

			submitUpload() {

				if (_self.uploadform.cateid == undefined || _self.uploadform.cateid == null) {
					_self.msgError("请选择分类");
					return false;
				}


				this.$refs.upload.submit();
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleRemove(file) {
			},
			uploadsuccess(res) {
				if (res.code == 200) {
					_self.init();
					this.$refs.upload.clearFiles();
					_self.msgSuccess(res.msg);
					_self.uploadDrawer = false;
				} else {
					_self.msgError(res.msg);
				}
			},
			typeChange(e) {
				_self.listtype = e;

				_self.init();
			},
			listshowpic(data) {

				this.dialogImageUrl = data.http_url;
				this.dialogVisible = true;
			},
			showVideo(data){
				_self.playerOptions.sources[0]['src'] = data.http_url;
				this.videodialog = true;
			},
			colsevideo(){
			 return	this.$refs.videoPlayer.pause;
			}
		}
	}
</script>

<style lang="scss">
	.filesDrawer {
		.el-drawer__header {
			padding: 10px;
			min-height: 40px;
			background-color: #ecf5ff;
			color: #137ffe;
			margin-bottom: 0;

			.el-drawer__close-btn {
				color: #137ffe;
			}
		}
	}

	.drawer-maing {
		margin: 10px;
	}

	.show {
		display: block;
	}

	.hidden {
		display: none;
	}

	.files-list {
		margin-top: 10px;
	}

	.drawer-main {
		.el-drawer__header {
			padding: 10px;
			min-height: 40px;
			background-color: #ecf5ff;
			color: #137ffe;
			margin-bottom: 0;

			.el-drawer__close-btn {
				color: #137ffe;
			}
		}
	}








	.d-c-r-l {
		display: flex;
		flex-wrap: wrap;


		.d-c-r-i {
			width: 180px;
			height: 180px;
			margin: 10px;
			border: #f7f7f7 solid 1px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f1f1f1;
			position: relative;

			.el-image {
				width: calc(100% - 20px);
				height: calc(100% - 20px);
				margin: 10px;

			}

			.select-check {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 0;
				height: 0;
				border-top: 30px solid #67C23A;
				border-left: 30px solid transparent;
				display: none;

				i {
					position: absolute;
					top: -27px;
					right: 0px;
					color: #ffffff;
				}
			}

			.showflex {
				display: block !important;

			}

			.hide {
				display: none !important;
			}

			.d-c-r-i-h {
				background-color: rgba(0, 0, 0, 0.4);
				width: 100%;
				height: 100%;
				position: absolute;
				display: none;
				align-items: center;
				text-align: center;
				flex-wrap: wrap;
				justify-content: center;

				i {
					font-size: 20px;
					color: #ffffff;
					margin: 10px;

				}
			}

		}

		.d-c-r-i:hover .d-c-r-i-h {
			display: flex !important;
		}
	}

	.files-title {
		width: 180px;
		font-size: 12px;

		margin: 10px;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}
</style>
